<template>
  <div class="outouter">
    <!-- 最外层 -->
  <div class="outer">
    <div class="inner">
    <!-- 左边区域 -->
      <div class="outerElements">
      <!-- 唱片图片区域 -->
      <div class="record">
        <img src="./images/disc.png" alt="唱片" class="recordImage" />
        <div class="record-inner">
          <img :src="lyric.songdetails.al &&  lyric.songdetails.al.picUrl">
        </div>
        <a class="recordText" href="###">生成外链播放器</a>
      </div>
      <!-- 歌曲详情 -->
      <div class="songTitle">
        <div class="songInformation">
          <div class="songName">
            <img class="single" src="./images/singel.png">
            <span>{{lyric.songdetails.name}}</span>
            <a href="##"><img src="./images/mv.png" alt="mv"></a>
          </div>
          <div class="singer">
            <p>歌手:<a href="##">{{lyric.songdetails.ar?lyric.songdetails.ar[0].name:''}}</a></p>
            <p>所属专辑:<a href="##">{{lyric.songdetails.al && lyric.songdetails.al.name}}</a></p>
          </div>
          <div class="songUI">
            <el-button type="primary" size="mini">▶播放</el-button>
            <el-button plain size="mini">收藏</el-button>
            <el-button plain size="mini">分享</el-button>
            <el-button plain size="mini">下载</el-button>
            <el-button plain size="mini">(198080)</el-button>
          </div>
        </div>
        <!-- 歌词 -->
        <div class="lyric">
          <p v-for="(item,index) in songlyric" :key="index">
            {{item}}
          </p>
          <p class="showMore">展开</p>
        </div>
      </div>
      </div>
        <Commends class="commends" :ids="songs.ids" :type="songs.type"/>
      </div>
    <!-- 右边区域 -->
    <div class="rightElements">
      <div class="similarSongTitle">相似歌曲</div>
      <div class="similarSongs">
        <div class="similarSongSpan" v-for="item in lyric.songsLike" :key="item.id">
          <div class="similarSonger">
            <p>{{item.name}}</p>
            <p>{{item.album.name}}</p>
          </div>
          <div class="similarLike">
            <span>▶</span>
            <span>+</span>
          </div>
        </div>
        <p class="downloadTitle">网易云音乐多端下载</p>
      </div>
      <div class="download">
        <img src="./images/apple.png">
        <img src="./images/windows.png">
        <img src="./images/android.png">
      </div>
      <p class="downloadBottom">同步歌单，随时畅听320k好音乐</p>
    </div>
  </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import Commends from '../../components/Commends'
export default {
  name: 'SinglePlay',
  data() {
    return {
      songlyric: [],
      picUrl: '',
      songs: {
        ids: 347230
      },
      type: 'songs'
    }
  },
  components: {
    Commends
  },
  computed: {
    ...mapState({
      lyric: (state) => state.singleplay
    })
  },
  methods: {
    ...mapActions('singleplay', ['getSinglePlay', 'getLyric', 'getSongLike']),
    ...mapMutations('singleplay', ['SET_SONG_ID'])
  },
  async mounted() {
    this.songs.ids = this.$route.query.ids
    this.SET_SONG_ID(this.songs.ids)
    await Promise.all([
      this.getSinglePlay(this.songs),
      this.getLyric(this.songs),
      this.getSongLike(this.songs)
    ])
    const a = this.lyric.lyric.split('\n')
    this.songlyric = a.map((item) => {
      return item.slice(11)
    })
  }
}
</script>

<style scoped>
.outouter {
  height: 100%;
}
.outer {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  height: 100%;
}
.inner {
  width: 709px;
  border: 1px solid #ccc;
  border-bottom: 1px solid transparent;
}
.outerElements {
  width: 709px;
  display: flex;
  padding-top: 20px;
}
.record {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 100;
}
.record-inner {
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 10px;
  right: 0;
  z-index: 99;
}
.record-inner img {
  height: 180px;
  width: 180px;
  border-radius: 50%;
}
.recordImage {
  height: 205px;
  width: 205px;
  margin-bottom: 20px;
  z-index: 100;
}
.songInformation {
  margin-bottom: 30px;
}
.songTitle {
  width: 414px;
  margin-left: 20px;
}

.songName {
  margin-bottom: 10px;
}
.singer {
  margin-bottom: 10px;
}
.singer :first-child {
  margin-bottom: 10px;
}
.rightElements {
  width: 270px;
  border: 1px solid #ccc;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  padding: 10px 20px;
  padding-top: 20px;
}
.similarSongTitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.similarSongSpan {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.downloadTitle {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.download {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}
.commends {
  margin: 0 auto;
}
.songName {
  font-size: 20px;
}
</style>
